{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Django BotUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- required for basic layout -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/botui/build/botui.min.css">
	
	<!-- default theme - you can create your own theme -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/botui/build/botui-theme-default.css">

    <!-- bootstrap cdn -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
  	<div class="container">
	  <div class="row">
	    <!-- <div class="col-sm">
	      
	    </div>
	    <div class="col-sm"> -->
	      	<!-- <div id="my-botui-app">
  				<bot-ui></bot-ui>
			</div>
			<form id="chatForm" action="" method="post" accept-charset="utf-8">
				{% csrf_token %}
				<input id="userInput" type="text" name="user_input">
				<button type="submit">Send</button>
			</form> -->

			<h1 class="text-left mt-5">Django-Rasa-BotUI</h1>

			<div id="webchat">
				<script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>
				<script>
				    WebChat.default.init({
				        selector: "#webchat",
				        initPayload: "/get_started",
				        interval: 1000, // 1000 ms between each message
				        customData: {"sender": "django"}, // arbitrary custom data. Stay minimal as this will be added to the socket
				        socketUrl: "http://localhost:5500/",
				        title: "Connect",
				        subtitle: "The bot which connects people",
				        profileAvatar: "https://rasa.com/assets/img/demo/rasa_avatar.png",
				        showCloseButton: true,
				        fullScreenMode: false
				    })
				</script>
			</div>

	    <!-- </div>
	    <div class="col-sm">
	      
	    </div> -->
	  </div>
	</div>

  	<!-- SCRIPTS -->
	<!-- Vue - BotUI requires Vue to be present in page -->
	<!-- <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js" type="text/javascript" charset="utf-8"></script>
	BotUI - main file
	<script src="https://unpkg.com/botui/build/botui.min.js" type="text/javascript" charset="utf-8"></script> -->

	<!-- bootstrap js -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

	<!-- custom script -->
	<!-- <script src="{% static 'js/script.js' %}" type="text/javascript" charset="utf-8"></script> -->

	<!-- ajax cdn -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </body>
</html>
